<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta id="wxKeywords" name="Keywords" content="星语心愿" />
<meta id="wxDescription" name="Description" content="星语心愿" />
<title>找回密码_星语心愿</title>
<!--全局resetCss样式开始-->
<link href="../assets/css/reset.css" rel="stylesheet" type="text/css" />
<!--全局resetCss样式结束-->

<!--公用commonCss样式开始-->
<link href="../assets/css/common/common.css" rel="stylesheet" type="text/css" />
<!--公用commonCss样式结束-->

<!--公用formCss样式开始-->
<link href="../assets/css/common/form.css" rel="stylesheet" type="text/css" />
<!--公用formCss样式结束-->

<!--页面Css样式开始-->
<link href="../assets/css/public/fpwd.css" rel="stylesheet" type="text/css" />
<!--页面Css样式结束-->

<!--主题themeCss样式开始-->
<link href="../assets/css/theme.css" rel="stylesheet" type="text/css" />
<!--主题themeCss样式结束-->
</head>
<body>
<!--头部开始-->
<div class="header clearfix">
	
    <!--头部工具栏开始-->
    <div class="header_tool">
		<!--头部工具栏主体开始-->
		<div class="tool_main clearfix">

			<!--左侧工具栏开始-->
			<div class="tool_left clearfix">
				<a>您好，欢迎来到星语心愿，请</a>
				<a href="#" class="green login">登录</a>
				<a href="#" class="orange reg">免费注册</a>

				<!--<a href="#" class="green nickname" title="好命先生好命先生">好命先生</a>
				<a>您好，欢迎来到星语心愿</a>
				<a href="#" class="red loginout">[退出登陆]</a>-->
			</div>
			<!--左侧工具栏结束-->

			<!--右侧工具栏开始-->
			<div class="tool_right clearfix" id="tool_right">
				<ul class="clearfix">
					<li class="clearfix">
						<a class="member_info" href="">
							<span class="tool_img tool_headpic"><img src="../assets/images/content/member_01.jpg" alt="" /></span>
							<span class="tool_nickname" title="凌大厨">凌大厨</span>
							<span class="tool_icon"><i class="icon_common icon_down"></i></span>
						</a>
						<!--展开顶级菜单开始-->
						<ul>
							<li>
								<a href="" title="">我的主页</a>
							</li>
							<li>
								<a href="" title="">账号设置</a>
							</li>
							<li>
								<a href="" title="">退出</a>
							</li>
						</ul>
						<!--展开顶级菜单结束-->
					</li>
					<li class="msg_nums clearfix">
						<a href="" title="">
							<span>消息</span>
							<i class="icon_common icon_nums">12</i>
						</a>
					</li>
					<li class="clearfix">
						<a href="" title="">
							<span>我的订单</span>
							<span class="tool_icon"><i class="icon_common icon_down"></i></span>
						</a>
					</li>
					<li class="clearfix">
						<a href="" title="">
							<span>收藏夹</span>
							<span class="tool_icon"><i class="icon_common icon_down"></i></span>
						</a>
					</li>
					<li class="clearfix">
						<a href="" title="">
							<span>服务分类</span>
							<span class="tool_icon"><i class="icon_common icon_down"></i></span>
						</a>
					</li>
					<li class="clearfix">
						<a href="" title="">
							<span>联系客服</span>
							<span class="tool_icon"><i class="icon_common icon_down"></i></span>
						</a>
					</li>
					<li class="clearfix">
						<a href="" title="">
							<span class="tool_icon"><i class="icon_common icon_app"></i></span>
							<span class="orange">APP下载</span>
						</a>
					</li>
				</ul>
			</div>
			<!--右侧工具栏结束-->
		</div>
		<!--头部工具栏主体结束-->
    </div>
    <!--头部工具栏结束-->
    
</div>
<!--头部结束-->	

<!--身体开始-->
<div class="layer">
	
	<!--头部LOGO开始-->
	<div class="public_common public_logo">
		<a href="" title="">
			<img src="../assets/images/logo.jpg" alt="" />
		</a>
	</div>
	<!--头部LOGO结束-->
	
	<!--忘记密码模块开始-->
	<div class="fpwd_module">
		
		<!--模块背景开始-->
		<div class="module_bg" style="background-image:url(../assets/images/content/public_bg.jpg);"></div>
		<!--模块背景结束-->
		
		<!--模块内容开始-->
		<div class="module_content">
			<!--主体内容开始-->
			<div class="public_common module_content_main clearfix">
				
				<!--内容广告开始-->
				<div class="content_main_ad">
					<img src="../assets/images/content/bg_word.png" alt=""  />
				</div>
				<!--内容广告结束-->
				
				<!--内容表单开始-->
				<div class="module_form_box content_main_form">
				<form name="fpwd_form" id="fpwd_form" method="">	
					<div class="fpwd_title clearfix">
						找回密码
					</div>
					<!--找回密码流程开始-->
					<div class="fpwd_process" id="fpwd_process">
						<!--注意：hover为当前步奏，passed为已完成步骤-->
						<ul class="clearfix">
							<li class="step_one hover">
			        			<span class="num">1</span>
			        			<span class="title">填写账号</span>
			        		</li>
			        		<li class="step_two">
			        			<span class="num">2</span>
			        			<span class="title">验证身份</span>
			        		</li>
			        		<li class="step_three">
			        			<span class="num">3</span>
			        			<span class="title">重置密码</span>
			        		</li>
			        		<li class="step_four">
			        			<span class="num">4</span>
			        			<span class="title">找回成功</span>
			        		</li>
						</ul>
					</div>
					<!--找回密码流程结束-->
					
					<!--找回密码步骤开始-->
					<div class="fpwd_step" id="fpwd_step">
						<!--第一步开始-->
						<ul id="step_one">
							<li class="form_text">
								<i class="icon_common icon_name"></i>
								<input type="text" name="realname" id="realname" class="text_common text_input" value="" placeholder="请输入登录账号(手机号码)" null="登录账号不能为空" />
							</li>
							<li class="form_text form_yzm clearfix">
								<input type="text" name="yzm" id="yzm" class="text_common text_input text_yzm" value="" placeholder="验证码" null="验证码不能为空" />
								<img src="../assets/images/content/yzm.jpg" class="img_yzm" alt=""  />
								<a class="change_yzm">看不清，换一张</a>
							</li>
							<li class="form_btn">
								<span class="btn btn_common form_submit" nowstep="1" nextstep="step_two">下一步</span>
							</li>
						</ul>
						<!--第二步开始-->
						<ul class="" id="step_two">
							<li class="form_text">
								<i class="icon_common icon_name"></i>
								<input type="text" name="realname" id="realname" class="text_common text_input" value="" disabled="disabled" />
							</li>
							<li class="form_text form_yzm clearfix">
								<input type="text" name="yzm" id="yzm" class="text_common text_input text_yzm" value="" placeholder="短信验证码" null="短信验证码不能为空" />
								<a class="get_yzm yzm_default">获取短信验证码</a>
								<!--<a class="get_yzm yzm_time"><em class="red">60</em> 秒后重新获取</a>-->
							</li>
							<li class="form_btn">
								<span class="btn btn_common form_submit" nowstep="2" nextstep="step_three">下一步</span>
							</li>
						</ul>
						<!--第三步开始-->
						<ul id="step_three">
							<li class="form_text">
								<i class="icon_common icon_pwd"></i>
								<input type="password" name="password" id="password" class="text_common text_input" value="" placeholder="请输入新密码" null="新密码不能为空" />
							</li>
							<li class="form_text">
								<i class="icon_common icon_pwd"></i>
								<input type="password" name="r_password" id="r_password" class="text_common text_input" value="" placeholder="请重复输入新密码" null="重复新密码不能为空" same="两次输入密码不一致" />
							</li>
							<li class="form_btn">
								<span class="btn btn_common form_submit" nowstep="3" nextstep="step_four">提交</span>
							</li>
						</ul>
						<!--第四步开始-->
						<ul id="step_four">
							<li class="form_text">
								您已修改成功，请妥善保管自己的账号、密码。
							</li>
							<li class="form_text">
								<em class="orange" id="cut_time">10</em>秒后将跳转<a href="" class="orange">登录</a>界面
							</li>
						</ul>
					</div>
					<!--找回密码步骤结束-->
				</form>
				</div>
				<!--内容表单结束-->
				
			</div>
			<!--主体内容结束-->
		</div>
		<!--模块内容结束-->
		
	</div>		
	<!--忘记密码模块结束-->
		
</div>
<!--身体结束-->

<!--底部开始-->
<div class="footer clearfix">
		
	<!--底部主体开始-->
    <div class="footer_main clearfix">
        
        <!--底部快捷导航开始-->
        <div class="footer_link clearfix">
        	<dl>
            	<dt>
                	新手指南
                </dt>
                <dd>
                	<a href="">注册登录</a>
                </dd>
                <dd>
                	<a href="">完善资料</a>
                </dd>
                <dd>
                	<a href="">购买流程</a>
                </dd>
                <dd>
                	<a href="">会员介绍</a>
                </dd>
                <dd>
                	<a href="">常见问题</a>
                </dd>
            </dl>
            <dl>
            	<dt>
                	支付方式
                </dt>
                <dd>
                	<a href="">在线支付</a>
                </dd>
                <dd>
                	<a href="">星币支付</a>
                </dd>
                <dd>
                	<a href="">转账汇款</a>
                </dd>
            </dl>
            <dl>
            	<dt>
                	安全保障
                </dt>
                <dd>
                	<a href="">实名认证</a>
                </dd>
                <dd>
                	<a href="">资质认证</a>
                </dd>
                <dd>
                	<a href="">支付安全</a>
                </dd>
                <dd>
                	<a href="">专业服务</a>
                </dd>
                <dd>
                	<a href="">售后无忧</a>
                </dd>
            </dl>
            <dl>
            	<dt>
                	售后服务
                </dt>
                <dd>
                	<a href="">发票相关</a>
                </dd>
                <dd>
                	<a href="">退款说明</a>
                </dd>
                <dd>
                	<a href="">忘记密码</a>
                </dd>
                <dd>
                	<a href="">意见反馈</a>
                </dd>
            </dl>
            <dl>
            	<dt>
                	联系我们
                </dt>
                <dd>
                	<a href="">新浪微博</a>
                </dd>
                <dd>
                	<a href="">官方微信</a>
                </dd>
                <dd>
                	<a href="">关于我们</a>
                </dd>
                <dd>
                	<a href="">联系我们</a>
                </dd>
            </dl>
        </div>    
        <!--底部快捷导航结束-->
        
        <!--底部二维码导航开始-->
        <div class="footer_code">
        	<img src="../assets/images/code.jpg" alt="" />
            <p>微信二维码</p>
        </div>  
        <!--底部二维码导航结束-->
        
        <!--底部联系方式开始-->
        <div class="footer_tel">
        	<p class="title">咨询电话</p>
            <p class="number">400-666-6789</p>
            <p>E-mail：400000@qq.com</p>
            <p>QQ：4000 000</p>
        </div>
        <!--底部联系方式结束-->
        
    </div>
	<!--底部主体结束-->
    
    <div class="space_hx">&nbsp;</div>
    
    <!--底部版权信息开始-->
    <div class="footer_copyright">
    	© 2015 长沙星语心愿信息技术有限公司 版权所有   湘ICP备10000087号
    </div>
    <!--底部版权信息结束-->

</div>
<!--底部结束-->

<!--身体右边公用侧边栏开始-->
<div class="body_fixed_nav" id="body_fixed_nav">
	<a href="" title="" class="clearfix">
		<span class="icon"><i class="icon_common icon_msg"></i></span>
		<span class="word">在线留言</span>
	</a>
	<a href="" title="" class="clearfix">
		<span class="icon"><i class="icon_common icon_love"></i></span>
		<span class="word">我的最爱</span>
	</a>
	<a href="" title="" class="clearfix">
		<span class="icon"><i class="icon_common icon_history"></i></span>
		<span class="word">浏览历史</span>
	</a>
	<a href="" title="" class="clearfix">
		<span class="icon"><i class="icon_common icon_collect"></i></span>
		<span class="word">我的收藏</span>				
	</a>
	<a href="javascript:;" title="" id="nav_back_top" class="clearfix">
		<span class="icon"><i class="icon_common icon_backtop"></i></span>
		<span class="word">回到顶部</span>
	</a>
</div>
<!--身体右边公用侧边栏结束-->

<!--Jquery库开始-->
<script type="text/javascript" src="../assets/js/lib/jquery-1.8.3.min.js"></script>
<!--Jquery库结束-->
<!--公用cmmonJS开始-->
<script type="text/javascript" src="../assets/js/common/common.js"></script>
<!--公用cmmonJS结束-->
<!--弹出层插件layer开始-->
<script type="text/javascript" src="../assets/plugins/layer/layer.js"></script>
<!--弹出层插件layer结束-->
<script type="text/javascript">
$(function(){
	//点击下一步
	$('#fpwd_step .form_submit').on('click',function(){
		var	obj         = $(this),
		 	nowStep     = obj.attr('nowstep'),
			nextStep    = obj.attr('nextstep'),
			realname    = obj.parent('li').siblings('li').find('#realname'),
			pwd         = obj.parent('li').siblings('li').find('#password'),
			yzm         = obj.parent('li').siblings('li').find('#yzm'),
			rPwd        = obj.parent('li').siblings('li').find('#r_password'),
			fixname     = obj.parents('ul').siblings('ul#'+nextStep).find('#realname'),
			nowStepNums = $('#fpwd_process>ul>li.'+nextStep),
			color       = '#FF7800',
			realnameTip = '已验证账号：',
			cutTime     = $('#cut_time');
		
		//初始化关闭所有的tips层
		layer.closeAll('tips'); 
		
		if(nowStep==1){
			//第一步->第二步
			if(!realname.val()){
				layer.tips(realname.attr('null'), realname, {tips: [1, color]});
				return false;
			}
			if(!yzm.val()){
				layer.tips(yzm.attr('null'), yzm, {tips: [1, color]});
				return false;
			}
			fixname.val(realnameTip+realname.val());
		}else if(nowStep==2){
			//第二步->第三步
			if(!yzm.val()){
				layer.tips(yzm.attr('null'), yzm, {tips: [1, color]});
				return false;
			}
		}else if(nowStep==3){
			//第三步->第四步
			if(!pwd.val()){
				layer.tips(pwd.attr('null'), pwd, {tips: [1, color]});
				return false;
			}
			if(!rPwd.val()){
				layer.tips(rPwd.attr('null'), rPwd, {tips: [1, color]});
				return false;
			}
			if(pwd.val()!=rPwd.val()){
				layer.tips(rPwd.attr('same'), rPwd, {tips: [1, color]});
				return false;
			}
			
			//倒计时10秒
			var count = cutTime.html();
			var time = setInterval(function(){
				count--;
				if(count==0){
					clearInterval(time);
					//提交表单
					$('#fpwd_form').submit();
					//跳转到登陆界面
				}
				cutTime.html(count);
			},1000);
			
		}
		
		//下一步显示，上一步隐藏
		obj.parents('ul').hide().siblings('#'+nextStep).fadeIn();
		nowStepNums.addClass('hover').siblings().removeClass('hover');
		nowStepNums.prevAll().addClass('passed');
		nowStepNums.nextAll().removeClass('passed');
	});
	
	
});


</script>
</body>
</html>
